﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>天地图Demo</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0"></script>
    <script src="../../js/jquery-1.10.2.js"></script>
    <script>
        var map;
        var zoom = 13;
        var loc;
        var point = new T.LngLat(116.342268, 37.175545);
        function onLoad() {
            map = new T.Map('mapDiv');
            initMapControl(map);
            var data = { "jingdianList": [{ "JDBianHao": 59, "JDMingCheng": "康熙探花花园", "JDJieShao": "康熙探花花园康熙探花花园康熙探花花园康熙探花花园康熙探花花园康熙探花花园康熙探花花园康熙探花花园康熙探花花园", "JDWeiZhi": "", "JingDu": "116.358509", "WeiDu": "37.176925", "TuPian": "src%3D%22%20/upload/image/20180818/6367017751596603592418224.jpg%22"}, { "JDBianHao": 62, "JDMingCheng": "王打卦村", "JDJieShao": "王打卦村王打卦村王打卦村王打卦村王打卦村王打卦村王打卦村王打卦村王打卦村王打卦村", "JDWeiZhi": "", "JingDu": "116.343023", "WeiDu": "37.171462", "TuPian": "src%3D%22%20/upload/image/20180818/6367017867832140891782787.jpg%22"},], "jingdianCount": 2 }
                var gisdata = data.jingdianList;
                $.each(gisdata, function (index, n) {
                  
                    if (gisdata[index].JDJieShao.length < 60) {
                        gisdata[index].JDJieShao = gisdata[index].JDJieShao + "<a href='../aspx/LvYouJingDian_View.aspx?id=" + gisdata[index].JDBianHao + "'>查看详情</a>";
                    }
                    else {
                        gisdata[index].JDJieShao = gisdata[index].JDJieShao.substring(-1, 60) + "...<a href='../aspx/LvYouJingDian_View.aspx?id=" + gisdata[index].JDBianHao + "'>查看详情</a>";
                    }
                    //这里的图片地址是经过编码的字符串，使用时要进行解码
                    gisdata[index].TuPian = unescape(gisdata[index].TuPian);
                });
                for (var i = 0; i < data.jingdianCount; i++) {
                    var marker = new T.Marker(new T.LngLat(gisdata[i].JingDu, gisdata[i].WeiDu));  // 创建标注
                    var JDMingCheng = gisdata[i].JDMingCheng;
                    var JDBianHao = gisdata[i].JDBianHao;
                    var JDJieShao = gisdata[i].JDJieShao;//获取内容
                    var image = gisdata[i].TuPian;
                    var Info = { MingCheng: JDMingCheng, BianHao: JDBianHao, JieShao: JDJieShao, image: image }; map.addOverLay(marker); // 将标注添加到地图中
                    openwindow(marker, Info);
                }             
      
            var cp = new T.CoordinatePickup(map, { callback: getLngLat })
            cp.addEvent();
            function openwindow(marker, Info) {
                var infoWin1 = new T.InfoWindow({ minWidth:600});
                var sContent =
                    " <div style='margin:0px;'>" +
                    "<div style='margin:10px 10px; '>" +
                    "<img style='float:left;margin:0px 10px' width='100' height='80' title='' " + Info.image + "/>" +
                    "  <div style='margin:0px 0px 0px 120px;width:170px;height:auto'>景点名称 :" + Info.MingCheng + "<br>景点简介:<span style='width:169px'>" + Info.JieShao +
                    "</span></div>" +                    
                    " <input type='button' name='edit' value='编辑' onclick='editMarker(" + Info.BianHao + ")' />" +
                    " <input type ='button' name = 'delete' value = '删除' onclick = 'deleteMarker(" + Info.BianHao + ")'/>" +
                    "</div>" +
"</div>";
                infoWin1.setContent(sContent);
                marker.addEventListener("click", function () {
                    marker.openInfoWindow(infoWin1);
                });
            }
            function addClickHandler(content, marker) {
                marker.addEventListener("click", function (e) {
                    openInfo(content, e)
                }
                );
            }
            function openInfo(content, e) {
                var point = e.lnglat;
                marker = new T.Marker(point);// 创建标注
                var markerInfoWin = new T.InfoWindow(content, { offset: new T.Point(0, -30) }); // 创建信息窗口对象
                map.openInfoWindow(markerInfoWin, point); //开启信息窗口
            }            
            addContextMenu();
        }
        function getLngLat(lnglat) {
            document.getElementById("lnglatStr").value = lnglat.lng + "," + lnglat.lat;
        }
        function endeditMarker() {
            var markers = markerTool.getMarkers()
            for (var i = 0; i < markers.length; i++) {
                markers[i].disableDragging();
            }
        }
        function deleteMarker(id) {
            alert("删除的id:" + id);
        }
        function editMarker(id) {
            alert("编辑的id:" + id);
            //跳转到编辑页
           // window.location.href = "../aspx/LvYouJingDian_Edit.aspx?id=" + id;
        }
        function initMapControl(map) {
            //设置显示地图的中心点和级别
            map.centerAndZoom(point, zoom);
            //map.disableDrag();//不可拖拽,默认可拖拽
            //创建缩放平移控件对象
            var control = new T.Control.Zoom();
            control.setPosition(T_ANCHOR_TOP_LEFT);//设置控件位置位于左上角
            //添加缩放平移控件
            map.addControl(control);
            //创建比例尺控件对象
            var scale = new T.Control.Scale();
            //添加比例尺控件
            map.addControl(scale);
            //创建鹰眼控件对象
            var miniMap = new T.Control.OverviewMap({
                isOpen: true,
                size: new T.Point(150, 150)
            });
            //添加鹰眼控件
            map.addControl(miniMap);
            //创建地图类型对象
            var ctrl = new T.Control.MapType();
            //添加地图类型控件
            map.addControl(ctrl);
            //创建标注工具对象
            markerTool = new T.MarkTool(map, { follow: true });
        }
        function addContextMenu() {
            //创建右键菜单对象
            var menu = new T.ContextMenu({ width: 140 });
            //添加右键菜单
            var txtMenuItem = [
                {
                    text: '添加',
                    callback: function (lnglat) {
                        alert("添加")
                        addMarker(lnglat);
                    }
                },
                {
                    text: '放大',
                    callback: function () {
                        map.zoomIn()
                    }
                },
                {
                    text: '缩小',
                    callback: function () {
                        map.zoomOut()
                    }
                },
                {
                    text: '放置到最大级',
                    callback: function () {
                        map.setZoom(18)
                    }
                },
                {
                    text: '查看全国',
                    callback: function () {
                        map.setZoom(4)
                    }
                },
                {
                    text: '获得右键点击处坐标',
                    isDisable: false,
                    callback: function (lnglat) {
                        alert(lnglat.getLng() + "," + lnglat.getLat());
                    }
                },
                {
                    text: '刷新地图',
                    callback: function () {
                        window.location.reload();
                    }
                }
            ];

            for (var i = 0; i < txtMenuItem.length; i++) {

                //添加菜单项
                var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback);
                //item.disable();
                menu.addItem(item);
            //    if (i == 1 || i == 3) {
            //        //添加分割线
            //        menu.addSeparator();
            //    }
            }
            map.addContextMenu(menu);
        }
        function addMarker(lnglat) {
            var LngLat = (lnglat.getLng() + "," + lnglat.getLat());
            //跳转到添加页
           // window.location.href = "../aspx/LvYouJingDian_Add.aspx?jwdu=" + LngLat;
        }
    </script>
</head>
<body onLoad="onLoad()">
    <div id="mapDiv" style="width:1000px; height:650px"></div>
   坐标:
    <input type="text" id="lnglatStr" value="" />
</body>
</html>